<template>
  <div class="app-container">
    <el-card>

      <el-form :inline="true" :model="listQuery">
        <el-form-item label="社团名">
          <el-input v-model="listQuery.name" size="small" />
        </el-form-item>
        <el-form-item label="社团分类">
          <el-select v-model="listQuery.type" size="small" clearable filterable placeholder="">
            <el-option
              v-for="item in clubTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="业务单位">
          <el-select v-model="listQuery.business_unit_id" size="small" clearable filterable placeholder="">
            <el-option
              v-for="item in facultyList"
              :key="item.id"
              :label="item.faculty_title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="small"
            icon="el-icon-search"
            @click.native="handleFilter"
          >搜索</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click.native="resetFilter"
          >重置</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="listQuery">
        <el-form-item style="margin-bottom: 0px;">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click.native="goCreate"
          >申请成立社团</el-button>
          <el-button
            v-permission="['admin', 'set_club_apply_time']"
            type="primary"
            size="small"
            icon="el-icon-setting"
            @click.native="showSetTimeDialog"
          >设置社团招新时间</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="dataList"
        style="width: 100%;margin-top:10px;"
        max-height="600px"
        border
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column type="expand" label="更多" width="80">
          <template slot-scope="{row}">
            <div style="margin-left:20px;margin-right:20px;">
              <el-form>
                <el-form-item label="更多操作">
                  <el-button
                    v-permission="['admin', 'change_club_teahcer']"
                    type="danger"
                    size="mini"
                    plain
                    icon="el-icon-edit"
                    @click.native="showChangeTeacherDialog(row)"
                  > 更换指导老师 </el-button>
                  <!-- <el-button
                    v-permission="['admin', 'club_transition']"
                    type="danger"
                    size="mini"
                    plain
                    icon="el-icon-edit"
                    @click.native="showTranslationDialog(row)"
                  > 申请换届 </el-button> -->
                  <el-button
                    type="danger"
                    size="mini"
                    plain
                    icon="el-icon-edit"
                    @click.native="showClubQuitDialog(row)"
                  > 申请退团 </el-button>
                  <el-button
                    v-permission="['admin', 'club_cancel']"
                    type="danger"
                    size="mini"
                    plain
                    icon="el-icon-edit"
                    @click.native="showClubCancelDialog(row)"
                  > 注销社团 </el-button>

                </el-form-item>
              </el-form>
              <el-descriptions title="社团基本信息" direction="vertical" :column="3" border>
                <el-descriptions-item label="社团名称">
                  <div class="link-type" @click="showViewDialog(row)">
                    <span class="link-type" style="text-decoration:underline">{{ row.name }}</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="社团分类">{{ row.type }}</el-descriptions-item>
                <el-descriptions-item label="成立时间">{{ row.established_time }}</el-descriptions-item>
                <el-descriptions-item label="社团成员数">
                  <div class="link-type" @click="showClubMemberDialog(row)">
                    <span class="link-type" style="text-decoration:underline">{{ row.member_count }}</span>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="会长">{{ row.account }}</el-descriptions-item>
                <el-descriptions-item label="指导老师">{{ row.teacher_realname }}</el-descriptions-item>
                <el-descriptions-item label="业务单位">{{ row.business_unit }}</el-descriptions-item>
                <el-descriptions-item label="报名开始时间">{{ row.apply_start_time }}</el-descriptions-item>
                <el-descriptions-item label="报名结束时间">{{ row.apply_end_time }}</el-descriptions-item>
                <el-descriptions-item label="一级审核">
                  <el-tag :type="row.first_check_status | statusFilter">
                    {{ row.first_check_status }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="二级审核">
                  <el-tag :type="row.second_check_status | statusFilter">
                    {{ row.second_check_status }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="社团名称" align="center">
          <template slot-scope="{row}">
            <div class="link-type" @click="showViewDialog(row)">
              <span class="link-type" style="text-decoration:underline">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="社团分类" />
        <el-table-column align="center" prop="established_time" label="成立时间" />
        <el-table-column align="center" prop="business_unit" label="业务单位" />
        <el-table-column label="社团成员" align="center">
          <template slot-scope="{row}">
            <div class="link-type" @click="showClubMemberDialog(row)">
              <span class="link-type" style="text-decoration:underline">{{ row.member_count }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="account" label="会长" />
        <el-table-column label="操作" min-width="100px" align="center">
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              plain
              icon="el-icon-edit"
              @click="goUpdate(row)"
            > 修改信息 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>

    <el-dialog
      title="设置社团招新时间"
      :visible.sync="setTimeDialog"
      width="50%"
    >
      <el-form ref="setTimeForm" :model="setTimeForm" :rules="setTimeRules" label-position="left" label-width="80px">
        <el-form-item label="招新时间" prop="time">
          <el-date-picker
            v-model="setTimeForm.time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:00']"
          />
        </el-form-item>
        <el-form-item label="社团" prop="values">
          <el-cascader
            v-model="setTimeForm.values"
            placeholder=""
            :show-all-levels="false"
            :options="clubOptions"
            :props="props"
            filterable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="setTime">
          确定
        </el-button>
        <el-button @click.native="setTimeDialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="更换社团指导老师"
      :visible.sync="changeTeacherDialog"
      width="50%"
    >
      <el-form ref="changeTeacherForm" :model="changeTeacherForm" :rules="changeTeacherRules" label-position="left" label-width="80px">
        <el-form-item label="社团名">
          <el-input v-model="changeTeacherForm.name" disabled style="width:50%" />
        </el-form-item>
        <el-form-item label="指导老师" prop="teacher_id">
          <el-select
            v-model="changeTeacherForm.teacher_id"
            filterable
            remote
            reserve-keyword
            placeholder="请填写指导老师的学工号或者姓名搜索"
            :remote-method="remoteTeacherMethod"
            :loading="searchLoading"
            style="width: 70%"
            @change="teacherChange"
          >
            <el-option
              v-for="item in teacherList"
              :key="item.id"
              :label="item.username + '-' + item.realname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-descriptions title="指导老师信息">
            <el-descriptions-item label="姓名">{{ teacherInfo.realname }}</el-descriptions-item>
            <el-descriptions-item label="教工号">{{ teacherInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="所属学院">{{ teacherInfo.faculty_title }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="createChangeTeacher">
          确定
        </el-button>
        <el-button @click.native="changeTeacherDialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="申请退出社团"
      :visible.sync="quitClubDialog"
      width="50%"
    >
      <el-form
        ref="quitClubForm"
        label-position="left"
        label-width="80px"
        :rules="quitClubRules"
        :model="quitClubForm"
      >
        <el-form-item label="社团名">
          <el-input v-model="quitClubForm.name" disabled style="width:50%" />
        </el-form-item>
        <el-form-item label="退团理由" prop="reason">
          <el-input
            v-model="quitClubForm.reason"
            autocomplete="off"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="createQuitClub">
          确定
        </el-button>
        <el-button @click.native="quitClubDialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="申请换届"
      :visible.sync="translationDialog"
      width="50%"
    >
      <el-form
        ref="translationForm"
        v-loading.fullscreen.lock="loading"
        :model="translationForm"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :rules="translationRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="新会长" prop="new_president_id">
          <el-select
            v-model="translationForm.new_president_id"
            filterable
            remote
            reserve-keyword
            placeholder="请填写完整的学工号或者姓名搜索"
            :remote-method="remoteMethod"
            :loading="searchLoading"
            style="width: 60%"
          >
            <el-option
              v-for="item in studentList"
              :key="item.id"
              :label="item.username + '-' + item.realname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="会议照片" prop="image">
          <el-upload
            ref="uploadImage"
            list-type="picture-card"
            :headers="headers"
            :data="elData"
            :limit="imageLimitCnt"
            :multiple="false"
            accept=".png,.jpg,.jpeg,.gif"
            :action="elUploadUrl"
            :before-upload="(res) => { return beforeUpload(res, 'trans_image', imageLimitSize) }"
            :on-exceed="(res) => { return handleExceed(res, imageLimitCnt) }"
            :on-error="handleError"
            :on-progress="handleProgress"
            :file-list="transFormImageList"
            :on-preview="previewImage"
            :on-success="(res) => { return handleSuccess(res, 'trans_image') }"
            :on-remove="(res) => { return handleRemove(res, 'trans_image') }"
          >
            <i class="el-icon-plus" />
            <div slot="tip" class="el-upload__tip">只能上传{{ imageLimitCnt }}张图片(jpg/jpeg/png/gif)，且单个文件不超过{{ imageLimitSize }}m</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="申请文件" prop="file">
          <el-upload
            ref="uploadFile"
            :headers="headers"
            :data="elData"
            :limit="fileLimitCnt"
            :multiple="false"
            accept=".xlsx,.xls,.pdf,.ppt,.doc,.docx,.pptx"
            :action="elUploadUrl"
            :before-upload="(res) => { return beforeUpload(res, 'trans_file', fileLimitSize) }"
            :on-exceed="(res) => { return handleExceed(res, fileLimitCnt) }"
            :on-error="handleError"
            :on-progress="handleProgress"
            :file-list="transFormFileList"
            :on-success="(res) => { return handleSuccess(res, 'trans_file') }"
            :on-remove="(res) => { return handleRemove(res, 'trans_file') }"
          >
            <el-button plain size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传{{ fileLimitCnt }}份文件，格式为：word文档，excel, pdf和ppt，且单个文件不超过{{ fileLimitSize }}m</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="会议记录" prop="record">
          <el-input
            v-model="translationForm.record"
            autocomplete="off"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="createTranslation">
          确定
        </el-button>
        <el-button @click.native="translationDialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="申请注销社团"
      :visible.sync="clubCancelDialog"
      width="50%"
    >
      <el-form
        ref="clubCancelForm"
        v-loading.fullscreen.lock="loading"
        :model="clubCancelForm"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :rules="clubCancelRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="会议照片" prop="image">
          <el-upload
            ref="uploadImage"
            list-type="picture-card"
            :headers="headers"
            :data="{ dir_name: 'club_cancel' }"
            :limit="imageLimitCnt"
            :multiple="false"
            accept=".png,.jpg,.jpeg,.gif"
            :action="elUploadUrl"
            :before-upload="(res) => { return beforeUpload(res, 'club_cancel_image', imageLimitSize) }"
            :on-exceed="(res) => { return handleExceed(res, imageLimitCnt) }"
            :on-error="handleError"
            :on-progress="handleProgress"
            :file-list="clubCancelImageList"
            :on-preview="previewImage"
            :on-success="(res) => { return handleSuccess(res, 'club_cancel_image') }"
            :on-remove="(res) => { return handleRemove(res, 'club_cancel_image') }"
          >
            <i class="el-icon-plus" />
            <div slot="tip" class="el-upload__tip">只能上传{{ imageLimitCnt }}张图片(jpg/jpeg/png/gif)，且单个文件不超过{{ imageLimitSize }}m</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="申请文件" prop="file">
          <el-upload
            ref="uploadFile"
            :headers="headers"
            :data="{ dir_name: 'club_cancel' }"
            :limit="fileLimitCnt"
            :multiple="false"
            accept=".xlsx,.xls,.pdf,.ppt,.doc,.docx,.pptx"
            :action="elUploadUrl"
            :before-upload="(res) => { return beforeUpload(res, 'club_cancel_file', fileLimitSize) }"
            :on-exceed="(res) => { return handleExceed(res, fileLimitCnt) }"
            :on-error="handleError"
            :on-progress="handleProgress"
            :file-list="clubCancelFormFileList"
            :on-success="(res) => { return handleSuccess(res, 'club_cancel_file') }"
            :on-remove="(res) => { return handleRemove(res, 'club_cancel_file') }"
          >
            <el-button plain size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传{{ fileLimitCnt }}份文件，格式为：word文档，excel, pdf和ppt，且单个文件不超过{{ fileLimitSize }}m</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="会议记录" prop="record">
          <el-input
            v-model="clubCancelForm.record"
            autocomplete="off"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="createClubCancel">
          确定
        </el-button>
        <el-button @click.native="clubCancelDialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="社团成员"
      :visible.sync="clubMemberDialogVisible"
      width="70%"
    >

      <el-form :inline="true" :model="clubMemberListQuery">
        <el-form-item label="社团状态">
          <el-select v-model="clubMemberListQuery.is_active" size="small" placeholder="">
            <el-option
              v-for="item in isActiveList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="small"
            icon="el-icon-search"
            @click.native="handleClubMemberFilter"
          >搜索</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click.native="resetClubMemberFilter"
          >重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="clubMemberListLoading"
        :data="clubMemberList"
        style="width: 100%;margin-top:10px;"
        max-height="600px"
        border
        highlight-current-row
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" prop="role" label="身份" />
        <el-table-column align="center" prop="username" label="学工号" />
        <el-table-column align="center" prop="realname" label="姓名" />
        <el-table-column align="center" prop="faculty_title" label="学院" />
        <el-table-column align="center" prop="politics_status" label="政治面貌" />
        <el-table-column align="center" prop="student_community" label="所属社区" />
        <el-table-column label="社团状态" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.is_active | activeStyleFilter">
              {{ row.is_active | activeTextFilter }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="clubMemberTotal>0" :total="clubMemberTotal" :page.sync="clubMemberListQuery.page" :limit.sync="clubMemberListQuery.limit" @pagination="getClubMember" />
    </el-dialog>

    <el-dialog
      :title="dialogText"
      :visible.sync="dialogViewFormVisible"
      width="60%"
    >
      <el-descriptions
        title="社团基本信息"
        direction="vertical"
        :column="2"
        border
      >
        <el-descriptions-item label="社团名字">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="社团分类">{{ form.type }}</el-descriptions-item>
        <el-descriptions-item label="业务单位">{{ form.business_unit }}</el-descriptions-item>
        <el-descriptions-item label="成立时间">{{ form.established_time }}</el-descriptions-item>
        <el-descriptions-item label="会长">{{ form.account }}</el-descriptions-item>
        <el-descriptions-item label="指导老师">{{ form.teacher_realname }}</el-descriptions-item>
        <el-descriptions-item label="报名开始时间">{{ form.apply_start_time }}</el-descriptions-item>
        <el-descriptions-item label="报名结束时间">{{ form.apply_end_time }}</el-descriptions-item>
      </el-descriptions>

      <el-form ref="form" :model="form" status-icon label-position="top">
        <el-form-item label="社团介绍" style="margin-top:10px;">
          <div class="rich" v-html="form.introduction" />
        </el-form-item>

        <el-form-item label="社团logo">
          <el-upload
            action="#"
            disabled
            :file-list="form.club_photo"
            class="hideImageUpload"
            list-type="picture-card"
          >
            <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
              <viewer ref="viewer" style="width:100%;height:100%">
                <img
                  style="width:100%;height:100%"
                  :src="file.url"
                  alt=""
                >
              </viewer>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="previewImage(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="社团轮播图">
          <el-upload
            action="#"
            disabled
            :file-list="form.club_images"
            class="hideImageUpload"
            list-type="picture-card"
          >
            <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
              <viewer ref="viewer" style="width:100%;height:100%">
                <img
                  style="width:100%;height:100%"
                  :src="file.url"
                  alt=""
                >
              </viewer>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="previewImage(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="社团申请文件">
          <el-upload
            class="hideImageUpload"
            action="#"
            disabled
            :on-preview="previewFile"
            :file-list="form.club_files"
          />
        </el-form-item>

        <el-form-item>
          <el-collapse v-model="activeName">
            <el-collapse-item name="check_history">
              <template slot="title">
                <span style="font-size:14px;margin-left:10px;">历史审核记录</span>
                <i class="header-icon el-icon-success" />
              </template>
              <div class="block" style="margin-left:100px;">
                <el-timeline>
                  <el-timeline-item
                    v-for="(item, index) in form.check_history"
                    :key="index"
                    :timestamp="item.created_time"
                    :color="index===0? '#0bbd87': ''"
                    :size="index===0? 'large': 'normal'"
                  >
                    {{ item.check_level_name }}状态:
                    <el-tag :type="item.check_status | statusFilter" style="margin-left:10px;">
                      {{ item.check_status }}
                    </el-tag>
                    <br>
                    {{ item.check_level_name }}意见:
                    <span style="margin-left: 10px;">
                      {{ item.check_opinion }}
                    </span>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogViewFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-image-viewer
      v-if="previewImg"
      style="width:100%;height:100%"
      :on-close="() => { previewImg = false }"
      :url-list="[imgUrl]"
      :z-index="9999"
    />

  </div>
</template>

<script src="./index.js"></script>

<style lang="scss">
.el-dialog__body .action {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
}
.hideImageUpload .el-upload--picture-card {
  display: none;
}
.hideImageUpload .el-upload--text {
  display: none;
}
.rich img {
  width: 100%;
}
</style>
